<template>
  <button
    @click="toggleTheme"
    class="tw-fixed tw-top-4 tw-right-4 tw-p-2 tw-rounded-full tw-bg-white dark:tw-bg-gray-800 tw-shadow-md hover:tw-bg-gray-100 dark:tw-hover:tw-bg-gray-700 tw-transition-colors"
    aria-label="切换主题模式"
  >
    <!-- 亮色模式显示月亮图标 -->
    <svg
      v-if="!isDark"
      class="tw-w-5 tw-h-5 tw-text-neutral-700"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
      ></path>
    </svg>

    <!-- 暗黑模式显示太阳图标 -->
    <svg
      v-else
      class="tw-w-5 tw-h-5 tw-text-yellow-400"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
      ></path>
    </svg>
  </button>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import darkTheme from '@/composables/darkThemeUtils'

darkTheme.initTheme()
// 创建响应式状态
const isDark = ref(darkTheme.isDark)

// 监听暗黑模式变化并更新响应式状态
watchEffect(() => {})

// 切换主题模式
const toggleTheme = () => {
  darkTheme.toggleMode()
  isDark.value = darkTheme.isDark
}
</script>
